<template>
  <view class="container">
    <button @click="showPopup">显示弹出层</button>
    <Popup :visible="isPopupVisible" @close="closePopup">
      <view class="popup-content">
        <text>驳回原因</text>
        <uni-easyinput 
          type="textarea" 
          autoHeight 
          v-model="value" 
          focus
          placeholder="请输入内容"
          @input="input">
        </uni-easyinput>
        <view class="buttons">
          <button class="confirm-button" @click="handleConfirm">确认</button>
          <button class="close-button" @click="closePopup">关闭</button>
        </view>
      </view>
    </Popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Popup from '../../../components/Popup/Popup.vue';

const isPopupVisible = ref(false);
const value = ref("");

const showPopup = () => {
  isPopupVisible.value = true;
};

const closePopup = () => {
  isPopupVisible.value = false;
};

const handleConfirm = () => {
  console.log('确认内容：', value.value);
  // 在这里可以添加其他逻辑，比如提交数据
  closePopup();
};

const input = (e) => {
  console.log('输入内容：', e);
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.confirm-button, .close-button {
	  font-size: 15px;
	  width: 130rpx;
	  height: 80rpx;
	  border: none;
	  border-radius: 5px;
	  cursor: pointer;
}

.confirm-button {
  background-color: #e1f3d8;
  color: #09bb07;
}

.close-button {
  background-color: #fde2e2;
  color: #f56c6c;
}
</style>